<template>
  <div class="consultation-list">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="全部问诊"
      left-text="返回"
      left-arrow
      @click-left="onBack"
      fixed
    />

    <!-- 状态筛选 -->
    <van-tabs
      v-model:active="activeTab"
      sticky
      offset-top="46px"
      @change="handleTabChange"
    >
      <van-tab title="全部" name="">
        <consultation-list :key="null" :status="null" v-if="activeTab === ''" />
      </van-tab>
      <van-tab title="待接诊" name="0">
        <consultation-list :key="0" :status="0" v-if="activeTab === '0'" />
      </van-tab>
      <van-tab title="问诊中" name="1">
        <consultation-list :key="1" :status="1" v-if="activeTab === '1'" />
      </van-tab>
      <van-tab title="已完成" name="2">
        <consultation-list :key="2" :status="2" v-if="activeTab === '2'" />
      </van-tab>
      <van-tab title="已取消" name="3">
        <consultation-list :key="3" :status="3" v-if="activeTab === '3'" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ConsultationList from './components/ConsultationList.vue'

import router from '@/router'

// const router = useRouter()
const activeTab = ref('')

// 处理标签页切换
const handleTabChange = () => {
  // 标签切换时不需要额外处理，通过v-if和key来控制组件重新创建
}

const onBack = () => {
  // router.back()
  router.push('/doctor/home');
}
</script>

<style lang="scss" scoped>
.consultation-list {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  display: flex;
  flex-direction: column;

  .van-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;

    :deep(.van-tabs__content) {
      flex: 1;
      overflow: hidden;

      .van-tab__pane {
        height: 100%;
      }
    }
  }
}
</style>
